<template>
  <div>
    <!-- <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel> -->
    <div class="banner_box">
      <div class="container">
        <a
          href="http://wpa.qq.com/msgrd?v=3&amp;uin=36360178&amp;site=qq&amp;menu=yes" target="_blank">
          <!--3007685428 36360178 -->
          <img
            ref="image"
            src="../../../static/tf/TF_banner_Text content@2x.png"
            class="image_banner"
          />
        </a>
      </div>
    </div>
    <div class="container">
      <div class="one_title">我们的优势</div>
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="8"
          :xl="8"
          v-for="(item, index) in ysList"
          :key="index"
        >
          <div class="grid-content bg-purple one_item">
            <img class="one_item_image" :src="item.icon" />
            <div class="one_item_title">{{ item.title }}</div>
            <div class="one_item_content">
              <p v-html="item.des"></p>
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="one_title">使用方法</div>
      <div class="two_content">
        <img class="two_img" src="../../../static/icon_LiuChen@2x.png" />
      </div>

      <div class="one_title">常见问题</div>
      <div class="threa_content">
        <el-row :gutter="20" class="row-bg" justify="space-around">
          <el-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="12"
            :xl="12"
            v-for="(item, index) in questionList"
            :key="index"
          >
            <div class="threa_item">
              <div class="threa_item_one">
                <img
                  class="threa_item_image"
                  src="../../../static/tf_question.png"
                />
                <div class="threa_item_title_one">{{ item.question }}</div>
              </div>
              <div class="threa_item_one">
                <img
                  class="threa_item_image"
                  src="../../../static/tf_answer.png"
                />
                <div class="threa_item_title_two">
                  {{ item.answer }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      ysList: [
        {
          icon: "../../../static/tf_apple.png",
          title: "官方认可 专业服务",
          des:
            "采用苹果官方认可的分发模式，相较于企业签名会更加稳定；<br />并且我们为您提供专业的资深团队服务，给您的应用预先审核，让您的应用能更好的进行分发。",
        },
        {
          icon: "../../../static/tf_tool.png",
          title: "无需信任，直接安装",
          des:
            "使用苹果官方链接地址，让用户安装更加放心；<br />下载应用不再需要点击信任证书，直接下载使用；<br />应用更新信息经由苹果官方渠道推送，更加方便快捷。",
        },
        {
          icon: "../../../static/tf_great.png",
          title: "零风险，性价比高",
          des:
            "分发链接不再担心屏蔽风险，且无设备限制，任意苹果设备都可下载使用；<br />彻底远离企业签名频繁掉签，告别超级签名昂贵的价格，让您拥有最高性价比的签名体验。",
        },
      ],
      questionList: [
        {
          question: "上传应用有什么限制？",
          answer: "无限制，只需提供正确的 IPA 包即可。",
        },
        {
          question: "提交正确的包之后多久可以使用？",
          answer: "正常时间为1-3天，若您需要加急，请联系我们的客服人员。",
        },
        { question: "链接安装有效期为多长时间?", answer: "有效期为3个月。" },
        {
          question: "链接下载次数限制为多少？",
          answer:
            "每个安装链接最多下载10000次，每超过10000次重新生成一个新的安装链接。",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 顶部跳转
    bannerJump() {},
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
     
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f7f7f7");
  },
};
</script>
<style scoped>
/* 顶部图标 */
.top_img {
  width: 100%;
}
/* banner图 */
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #ffffff;
}
.bg-purple {
  background: #ffffff;
}
.bg-purple-light {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

/* 内容 */
.one_title {
  font-size: 40px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #000000;
  line-height: 40px;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 40px;
}
.one_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 200px; */
  margin-bottom: 20px;
  min-height: 430px;
}
.one_item_image {
  width: 30px;
  height: 30px;
  /* background-color: teal; */
  margin-top: 50px;
}
.one_item_title {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #5190ff;
  margin-top: 20px;
}
.one_item_content {
  font-size: 18px;
  line-height: 30px;
  color: #7e7e7e;
  padding: 45px;
  margin-bottom: 15px;
}

.two_content {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  padding: 20px;
}
.two_img {
  width: 90%;
  min-height: 30px;
  padding: 50px 20px;
}

.row-bg {
  margin-bottom: 20px;
}
.threa_item {
  background: #ffffff;
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 15px 20px 40px 20px;
  margin-bottom: 15px;
}
.threa_item_one {
  display: flex;
  margin-top: 15px;
}
.threa_item_image {
  width: 20px;
  height: 20px;
}
.threa_item_title_one {
  margin-left: 10px;
  font-weight: bold;
}
.threa_item_title_two {
  margin-left: 10px;
  color: #818181;
}

/* banner图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 顶部banner内容 */
.banner_box {
  position: relative;
  background-color: #358df6;
}

.image_banner {
  width: 100%;
  z-index: 999;
}
</style>